<template>
  <div class="swiper" ref="swiperRef">
    <!-- 轮播图区域 -->
    <div class="swiper-wrapper">
      <!-- 每一个轮播图 -->
      <!-- <div class="swiper-slide">
        <img src="./images/banner1.jpg" alt="banner" />
      </div>
      <div class="swiper-slide">
        <img src="./images/banner2.jpg" alt="banner" />
      </div>
      <div class="swiper-slide">
        <img src="./images/banner3.jpg" alt="banner" />
      </div>
      <div class="swiper-slide">
        <img src="./images/banner4.jpg" alt="banner" />
      </div> -->
      <!-- 
        public下面的资源，不管用不用，都会被打包（原封不动输出）
        src下面的资源，必须引用，才会被打包
       -->
      <div class="swiper-slide" v-for="img in imageList" :key="img.id">
        <img :src="img.imgUrl" alt="banner" />
      </div>
    </div>
    <!-- 小圆点 -->
    <div class="swiper-pagination"></div>

    <!-- 左右翻页 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
// API文档：https://swiperjs.com/swiper-api#autoplay
// 例子：https://swiperjs.com/demos/145-css-mode/core

// 引入完整Swiper js和css(打包文件更大)
// import Swiper from "swiper/swiper-bundle.esm.js";
// import "swiper/swiper-bundle.min.css";

// 按需引入（打包文件更小）
import Swiper, { Navigation, Pagination, Autoplay } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

export default {
  name: "SCarousel",
  // props: ['imageList'],
  // props: {
  //   imageList: Array,
  // },
  props: {
    imageList: {
      type: Array,
      required: true,
    },
  },
  // mounted() {},
  watch: {
    imageList: {
      handler(newVal) {
        // 将第一个轮播图初始化渲染没有数据，不要new Swiper
        if (!newVal.length) return;
        // 但数据发生变化时触发回调函数
        // 而数据发生变化时说明数据回来了

        // 数据更新是同步的，用户界面更新是异步的
        // 数据已经更新了，但是数据还未渲染成DOM元素

        this.$nextTick(() => {
          // 简单理解：等页面DOM渲染完成，再触发回调函数
          // 真正理解：将回调函数添加到回调队列去
          new Swiper(this.$refs.swiperRef, {
            // 声明使用模块
            modules: [Navigation, Pagination, Autoplay],
            // 左右翻页
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
            // 小圆点
            pagination: {
              el: ".swiper-pagination",
            },
            // 自动轮播
            // autoplay: true,
            autoplay: {
              // delay: 1000,
              pauseOnMouseEnter: true, // 鼠标移入暂停自动轮播
              disableOnInteraction: false, // 操作之后是否需要关闭自动轮播
            },
            // 无限轮播
            loop: true,
          });
        });
      },
      immediate: true, // 立即监视（监视一上来就会触发一次）
      // deep: true // 深度监视
    },
  },
};
</script>

<style></style>
